<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>联系信息管理</title>
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="/back/css/reset.css" type="text/css" media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="/back/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/back/css/invalid.css" type="text/css" media="screen" />
    

    
    <!-- jQuery -->
    <script type="text/javascript" src="/back/scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/back/scripts/simpla.jquery.configuration.js"></script>
    
    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>
    
    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>

    <style>
        /* 简洁样式，保持与原有后台风格一致 */
        .search-container {
            background: #f8f9fa;
            padding: 15px;
            border-bottom: 1px solid #ddd;
        }
        
        .search-container {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .search-form {
            display: flex;
            gap: 10px;
            align-items: end;
            flex-wrap: wrap;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .form-group label {
            font-weight: bold;
            color: #333;
            font-size: 0.9rem;
        }

        .form-control {
            padding: 5px 8px;
            border: 1px solid #ccc;
            font-size: 0.9rem;
        }

        .form-control:focus {
            border-color: #007bff;
            outline: none;
        }

        .btn {
            padding: 6px 12px;
            border: 1px solid #ccc;
            cursor: pointer;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .btn-primary {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }

        .btn-success {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
            border-color: #ffc107;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
            border-color: #dc3545;
        }

        .table-container {
            margin: 15px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            background: #f8f9fa;
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
            font-weight: bold;
        }

        .data-table td {
            padding: 8px;
            border: 1px solid #ddd;
            vertical-align: middle;
        }

        .data-table tbody tr:hover {
            background: #f5f5f5;
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-processing {
            background: #d1ecf1;
            color: #0c5460;
        }

        .status-completed {
            background: #d4edda;
            color: #155724;
        }

        .status-closed {
            background: #f8d7da;
            color: #721c24;
        }

        .action-buttons {
            display: flex;
            gap: 3px;
        }

        .btn-sm {
            padding: 3px 8px;
            font-size: 0.8rem;
        }

        .pagination {
            text-align: center;
            margin: 15px;
        }

        .page-btn {
            padding: 5px 10px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            margin: 0 2px;
        }

        .page-btn:hover, .page-btn.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }

        .stats-container {
            display: flex;
            gap: 15px;
            margin: 15px;
        }

        .stat-card {
            background: white;
            padding: 15px;
            border: 1px solid #ddd;
            text-align: center;
            flex: 1;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
            margin-top: 5px;
        }
    </style>

    <script>
        $(function () {
            loadContactStats();
            loadContactList();
        });

        // 加载统计数据
        function loadContactStats() {
            $.get('/api/contact/count/pending', function(result) {
                if (result.code === 200) {
                    $('#pendingCount').text(result.data || 0);
                }
            });
            
            $.get('/api/contact/count/today', function(result) {
                if (result.code === 200) {
                    $('#todayCount').text(result.data || 0);
                }
            });
        }

        // 加载联系信息列表
        function loadContactList(page = 1) {
            const params = {
                pageNum: page,
                pageSize: 10,
                email: $('#searchEmail').val(),
                name: $('#searchName').val(),
                subject: $('#searchSubject').val(),
                status: $('#searchStatus').val()
            };

            $.get('/api/contact/list', params, function(result) {
                if (result.code === 200) {
                    renderContactList(result.data.records);
                    renderPagination(result.data);
                } else {
                    alert('加载数据失败: ' + result.message);
                }
            });
        }

        // 渲染联系信息列表
        function renderContactList(contacts) {
            const tbody = $('#contactTableBody');
            tbody.empty();

            if (!contacts || contacts.length === 0) {
                tbody.append('<tr><td colspan="8" style="text-align: center; color: #6c757d;">暂无数据</td></tr>');
                return;
            }

            contacts.forEach(contact => {
                // 处理姓名显示：优先使用fullName，如果没有则组合firstName和lastName
                let displayName = contact.fullName || '';
                if (!displayName && (contact.firstName || contact.lastName)) {
                    displayName = (contact.firstName || '') + ' ' + (contact.lastName || '');
                }
                // 清理多余的空格
                displayName = displayName.trim();
                
                const row = `
                    <tr>
                        <td>${contact.id}</td>
                        <td>${displayName || '-'}</td>
                        <td>${contact.email}</td>
                        <td>${contact.phone || '-'}</td>
                        <td>${contact.company || '-'}</td>
                        <td>${contact.subjectDescription}</td>
                        <td><span class="status-badge status-${contact.status}">${contact.statusDescription}</span></td>
                        <td>${formatDateTime(contact.createTime)}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-primary btn-sm" onclick="viewContact(${contact.id})">查看</button>
                                <button class="btn btn-success btn-sm" onclick="updateStatus(${contact.id}, 'completed')">完成</button>
                                <button class="btn btn-danger btn-sm" onclick="deleteContact(${contact.id})">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }

        // 渲染分页
        function renderPagination(pageData) {
            const pagination = $('#pagination');
            pagination.empty();

            if (pageData.pages <= 1) return;

            // 上一页
            if (pageData.current > 1) {
                pagination.append(`<button class="page-btn" onclick="loadContactList(${pageData.current - 1})">上一页</button>`);
            }

            // 页码
            for (let i = 1; i <= pageData.pages; i++) {
                const activeClass = i === pageData.current ? 'active' : '';
                pagination.append(`<button class="page-btn ${activeClass}" onclick="loadContactList(${i})">${i}</button>`);
            }

            // 下一页
            if (pageData.current < pageData.pages) {
                pagination.append(`<button class="page-btn" onclick="loadContactList(${pageData.current + 1})">下一页</button>`);
            }
        }

        // 搜索
        function searchContacts() {
            loadContactList(1);
        }

        // 重置搜索
        function resetSearch() {
            $('#searchEmail').val('');
            $('#searchName').val('');
            $('#searchSubject').val('');
            $('#searchStatus').val('');
            loadContactList(1);
        }

        // 查看详情
        function viewContact(id) {
            $.get('/api/contact/detail/' + id, function(result) {
                if (result.code === 200) {
                    const contact = result.data;
                    const content = `
                        <div style="max-width: 600px;">
                            <h4>联系信息详情</h4>
                            <table style="width: 100%; margin-top: 15px;">
                                <tr><td><strong>姓名:</strong></td><td>${contact.fullName || (contact.firstName + ' ' + contact.lastName) || '-'}</td></tr>
                                <tr><td><strong>邮箱:</strong></td><td>${contact.email}</td></tr>
                                <tr><td><strong>电话:</strong></td><td>${contact.phone || '-'}</td></tr>
                                <tr><td><strong>公司:</strong></td><td>${contact.company || '-'}</td></tr>
                                <tr><td><strong>主题:</strong></td><td>${contact.subjectDescription}</td></tr>
                                <tr><td><strong>状态:</strong></td><td>${contact.statusDescription}</td></tr>
                                <tr><td><strong>提交时间:</strong></td><td>${formatDateTime(contact.createTime)}</td></tr>
                                <tr><td><strong>IP地址:</strong></td><td>${contact.ipAddress || '-'}</td></tr>
                            </table>
                            <div style="margin-top: 15px;">
                                <strong>留言内容:</strong>
                                <div style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-top: 5px; max-height: 200px; overflow-y: auto;">
                                    ${contact.message}
                                </div>
                            </div>
                        </div>
                    `;
                    showDialog('联系信息详情', content);
                } else {
                    alert('获取详情失败: ' + result.message);
                }
            });
        }

        // 更新状态
        function updateStatus(id, status) {
            if (confirm('确定要更新状态吗？')) {
                $.ajax({
                    url: '/api/contact/status/' + id,
                    type: 'PUT',
                    data: { status: status },
                    success: function(result) {
                        if (result.code === 200) {
                            alert('状态更新成功');
                            loadContactList();
                            loadContactStats();
                        } else {
                            alert('状态更新失败: ' + result.message);
                        }
                    }
                });
            }
        }

        // 删除联系信息
        function deleteContact(id) {
            if (confirm('确定要删除这条联系信息吗？')) {
                $.ajax({
                    url: '/api/contact/' + id,
                    type: 'DELETE',
                    success: function(result) {
                        if (result.code === 200) {
                            alert('删除成功');
                            loadContactList();
                            loadContactStats();
                        } else {
                            alert('删除失败: ' + result.message);
                        }
                    }
                });
            }
        }

        // 格式化日期时间
        function formatDateTime(dateTime) {
            if (!dateTime) return '-';
            const date = new Date(dateTime);
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' + 
                   String(date.getMinutes()).padStart(2, '0');
        }

        // 显示对话框
        function showDialog(title, content) {
            $('<div>').html(content).dialog({
                title: title,
                width: 700,
                height: 500,
                modal: true,
                resizable: true
            });
        }
    </script>
</head>
<body>
    <!-- 统计卡片 -->
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-number" id="pendingCount">0</div>
            <div class="stat-label">待处理</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" id="todayCount">0</div>
            <div class="stat-label">今日新增</div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="content-box">
        <div class="content-box-header">
            <h3>联系信息管理</h3>
        </div>

        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-form">
                <div class="form-group">
                    <label>邮箱</label>
                    <input type="text" id="searchEmail" class="form-control" placeholder="输入邮箱">
                </div>
                <div class="form-group">
                    <label>姓名</label>
                    <input type="text" id="searchName" class="form-control" placeholder="输入姓名">
                </div>
                <div class="form-group">
                    <label>主题</label>
                    <select id="searchSubject" class="form-control">
                        <option value="">全部主题</option>
                        <option value="sales">销售咨询</option>
                        <option value="technical">技术支持</option>
                        <option value="quote">报价请求</option>
                        <option value="demo">产品演示</option>
                        <option value="partnership">合作伙伴</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>状态</label>
                    <select id="searchStatus" class="form-control">
                        <option value="">全部状态</option>
                        <option value="pending">待处理</option>
                        <option value="processing">处理中</option>
                        <option value="completed">已完成</option>
                        <option value="closed">已关闭</option>
                    </select>
                </div>
                <div class="form-group" style="margin-top: 20px;">
                    <button class="btn btn-primary" onclick="searchContacts()">搜索</button>
                    <button class="btn btn-warning" onclick="resetSearch()">重置</button>
                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th>公司</th>
                        <th>主题</th>
                        <th>状态</th>
                        <th>提交时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="contactTableBody">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="pagination" id="pagination">
            <!-- 分页按钮将通过JavaScript动态生成 -->
        </div>
    </div>
</body>
</html>
